<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>提交管理</el-breadcrumb-item>
      <el-breadcrumb-item>提交列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 题目列表 -->
    <el-card>
      <el-table :data="judgeTableData" stripe style="width: 100%">
        <el-table-column prop="submitId" label="编号"> </el-table-column>

        <el-table-column prop="userName" label="用户"> </el-table-column>

        <el-table-column prop="problemTitle" label="题目"></el-table-column>

        <el-table-column prop="judgeState" label="结果" width="280px">
          <template v-slot="scope">
            <el-tag v-if="scope.row.judgeState === 0" key="0" type="success">
              Accepted
            </el-tag>

            <el-tag v-else-if="scope.row.judgeState === 1" key="1" type="info">
              Presentation Error
            </el-tag>

            <el-tag
              v-else-if="scope.row.judgeState === 2"
              key="2"
              type="warnning"
            >
              Time Limit Exceeded
            </el-tag>

            <el-tag
              v-else-if="scope.row.judgeState === 3"
              key="3"
              type="warnning"
            >
              Memory Limit Exceeded
            </el-tag>

            <el-tag
              v-else-if="scope.row.judgeState === 4"
              key="4"
              type="danger"
            >
              Wrong Answer
            </el-tag>
            <el-tag
              v-else-if="scope.row.judgeState === 5"
              key="5"
              type="danger"
            >
              Runtime Error
            </el-tag>
            <el-tag
              v-else-if="scope.row.judgeState === 6"
              key="6"
              type="danger"
            >
              Output Limit Exceeded
            </el-tag>
            <el-tag
              v-else-if="scope.row.judgeState === 7"
              key="7"
              type="danger"
            >
              Compile Error
            </el-tag>
            <el-tag
              v-else-if="scope.row.judgeState === 8"
              key="8"
              type="danger"
            >
              System Error
            </el-tag>

            <el-tag v-else>
              <i class="el-icon-loading"></i> <span>判题中</span>
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="usedSpace" label="内存"></el-table-column>

        <el-table-column prop="usedTime" label="时间"></el-table-column>

        <el-table-column prop="language" label="语言"> </el-table-column>

        <el-table-column prop="subTime" label="提交时间"> </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageParam.pageNo"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageParam.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      judgeTableData: [],
      // 分页数据
      pageParam: {
        pageSize: 5,
        pageNo: 1,
        param: {}
      },
      // 总共条数
      total: 0,

      // 编程语言
      langusage: ["", "C", "C++", "Java", "Pas", "Python"],
      // 判题状态
      judgeStatus: [
        "Accepted",
        "Presentation Error",
        "Time Limit Exceeded",
        "Memory Limit Exceeded",
        "Wrong Answer",
        "Runtime Error",
        "Output Limit Exceeded",
        "Compile Error",
        "System Error"
      ],
      // 判题标签
      items: [
        { type: "success", label: "Accept" },
        { type: "info", label: "Presentation Error" },
        { type: "warning", label: "Time Limit Exceeded" },
        { type: "warning", label: "Memory Limit Exceeded" },
        { type: "danger", label: "Wrong Answer" },
        { type: "danger", label: "Runtime Error" },
        { type: "danger", label: "Output Limit Exceeded" },
        { type: "danger", label: "Compile Error" },
        { type: "danger", label: "System Error" }
      ]
    };
  },
  created() {
    // 获取传递过来的提交  Id
    // this.submitId = this.$route.params.id;
    // 去服务器获取所有的评判数据
    this.getJudgeList();
  },

  methods: {
    async getJudgeList() {
      const { data: res } = await this.$http.post("judge/page", this.pageParam);

      if (res.meta.code !== 200) {
        return this.$message.error("获取判题列表数据失败");
      }

      this.judgeTableData = res.data.records;
      this.judgeTableData.forEach(item => {
        // 处理时间使用情况
        if (!item.usedTime) {
          item.usedTime = " 0 MS";
        } else {
          item.usedTime += " MS";
        }

        // 处理空间使用情况

        if (!item.usedSpace) {
          item.usedSpace = " 0 KB";
        } else {
          item.usedSpace += " KB";
        }

        // 处理编程语言
        item.language = this.langusage[item.compilerId];
      });

      this.total = res.data.total;

      console.log(res);
    },

    handleSizeChange(newSize) {
      this.pageParam.pageSize = newSize;
      this.getJudgeList();
    },
    handleCurrentChange(newNum) {
      this.pageParam.pageNo = newNum;
      this.getJudgeList();
    }
  }
};
</script>

<style></style>
